<!DOCTYPE html>
<html>
  <head>
    <title>Life Planner by Team Awesome</title>
    <link rel="shortcut icon" type="image/x-icon" href="/static/favicon.ico">
    <link href="/static/life_planner.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/static/life_planner.js"></script>
  </head>
  <body>
    <h1>The Life Planner!</h1>
    <h2>the best life planner ever. for serious.</h2>
    <div id="white_block"> 
    </div>
    <div id="invisible_space">
    </div>
    <div id="lights_logo">
      <img src="/static/light_green_small.png"> <img src="/static/light_blue_small.png"> <img src="/static/light_purple_small.png">
    </div>
    <ul class="message_bar">
      <a href="/"><li>Home</li></a>
      <a href="/instructions"><li id="active_button">Instructions</li></a>
      <a href="/life_planner"><li>Life Planner</li></a>
      <li id="new_post">New Post
        <ul class="message_dropdown">
          <li>
            <form action="/instructions" method="post" id="post_form">
              <textarea name="content" type="input/text" col='40' rows='5' ></textarea>
              <p>
                <label><input type="checkbox" name="cal_tag" />Add to To Do List</label>
              </p>
                <label><input type="checkbox" name="AM" />AM</label>
                <label><input type="checkbox" name="PM" />PM</label>
              <p>
                <label><input type="checkbox" name="mon_tag" />Add to Budget</label>
              </p>
              <p>
                <label><input type="checkbox" name="fla_tag" />Add to Flash Cards</label>
              </p>
              <input type="submit" name="submit" />
            </form>
          </li>
        </ul>
      </li>
      <a href="/favSite"><li>FavSite</li></a>
      <a href="/settings"><li>Settings</li></a>
      <a href='/contact'><li>Contact Us</li></a>
    </ul>
    <div class="content">
      <h3>Instructions</h3>
      <p>
        To add a message to your to do list, budget or flashcards, just hover over the New Post button, type a message following the official Life Planner format, check off your selection(s), and press submit! For the formats, please see below.
      </p>
      <h4>Flashcards Format: </h4>
      <p>
        Question:Answer
      </p>

      <h4>Budget Format:</h4>
      <table>
        <tr>
          <td>
            <img src="/static/piggy-bank-crutches.jpg" />
            <p class="image_subtitles">
              Don't let this be your piggy bank.
            </p>
          </td>
          <td>
            <p>
              The Life Planner will read your message and look for + or - signs followed by a number. This will be added to your budget, and everything else will be ignored. Example: I lost -20 dollars today. :(  
            </p>
          </td>
        </tr>
      </table>


      <h4>To Do List instructions: </h4>
      <p>
        Simply write the time as hour:minute anywhere in your message and the Life Planner will take care of everything!
      </p>
  
      <h4>FavSites instructions:</h4>
      <p>
        ex. @google.ca You do not need to select a place for it to display.
      </p>
    </div>
  </body>
</html>
